<template>
    <div class="layerControl" v-show="show" style="z-index: 100;background-color:  #101A64;width: 200px;top: 60px;padding-top:5px;padding-bottom:5px;left: 30px;position: absolute;min-height: 10px">
      <el-tree ref="tree" node-key="id" style="background-color:#101A64;color: white " :data="layers" :props="defaultProps" @check-change="checkChange" :default-checked-keys="defaultCheckedLayers" show-checkbox></el-tree>

    </div>
</template>

<script>
    export default {
      name: "DivLegend",
      props:{
        map:{
          type:Object,
          default:null
        },
        iszzjg:{
          type:Boolean,
          default: false, //从采集跳转的时候，不勾选种植结构，从担保跳转的时候，默认
        },
      },
      data(){
          return{
            show:false,
            layers:[],
            defaultProps: {
              children: 'items',
              label: 'id'
            },
            defaultCheckedLayers:[]
          }
      },
      created(){
          this.$bus.on("toggleLayerControl",this.toggleLayerControl)
      },
      mounted(){
        if(this.map){
          this.renderTocLayer(this.map.getStyle())
        }
      },
      methods:{
        toggleLayerControl(){
          this.show=!this.show;
        },
        checkChange(data,checked) {
          if(data.id==="种植结构"){
            this.$bus.emit('zzjg_ui',checked)
          }else if(this.map.getLayer(data.id)){
            if(checked){
              this.map.setLayoutProperty(data.id, 'visibility', "visible")
            }else {
              this.map.setLayoutProperty(data.id, 'visibility', "none")
            }
          }
        },
       //图层type属性修正。有的layer没有type属性，有ref属性,补充这个信息
        fixType(layer) {
          if (layer.type === undefined && layer.ref) {
            let layers = this.styleObj.layers;
            for (let i = 0, length = layers.length; i < length; i++) {
              if (layers[i].id === layer.ref) {
                layer.type = layers[i].type;
                break;
              }
            }
          }
        },
        renderTocLayer(styleObj) {
          let groups = styleObj['metadata'] ? (styleObj['metadata']['mapbox:groups'] ? styleObj['metadata']['mapbox:groups'] : {}) : {};
          let layers = styleObj['layers'];
          layers.reverse();

          /*==== modify by gf 20190123 layers里包含了用于顶部查询的一些透明图层，这些图层不应该出现在图层控制里，在这里将其过滤掉，这些图层的特点是dt开头，依此过滤 ==================*/
          let tempLayerArr = [];
          layers.forEach(item => {
            if (item.id.indexOf("dt") < 0 && item.id.indexOf("_select") < 0 && item.id.indexOf("gl") < 0&& item.id.indexOf("selectionSetDraw") < 0&& item.id.indexOf("temp") < 0) {
              tempLayerArr.push(item);
            }
          });
          layers = tempLayerArr;
          /*======================*/


          let mylayers = [];
          let layerIndex = -1;
          let defaultCheckedLayers = [];
          for (let i = 0, length = layers.length; i < length; i++) {
            let layer = layers[i];
            this.fixType(layer);
            layer.visibility = layer.layout ? (layer.layout.visibility ? layer.layout.visibility : 'visible') : 'visible';
            layer.visibility = layer.visibility === 'visible';


            if (layer.visibility === true) {
              defaultCheckedLayers.push(layer.id);
            }
            if (layer['metadata'] && layer['metadata']['mapbox:group']) {
              let layername = groups[layer['metadata']['mapbox:group']].name;
              let collapsed = groups[layer['metadata']['mapbox:group']].collapsed;

              if (mylayers[layerIndex] && mylayers[layerIndex]['id'] === layername) {
                mylayers[layerIndex]['items'].push(layer);
              } else {
                layerIndex++;
                mylayers[layerIndex] = {};
                mylayers[layerIndex]['visibility'] = false;
                mylayers[layerIndex]['items'] = [];
                mylayers[layerIndex]['id'] = layername;
                mylayers[layerIndex]['collapsed'] = collapsed;
                mylayers[layerIndex]['items'].push(layer);
              }
              if (!layer.layout || layer.layout.visibility !== 'none') {
                mylayers[layerIndex]['visibility'] = true;
              }
              if(layer.id == '种植结构'){
                mylayers[layerIndex]['visibility'] = this.iszzjg;
              }
            } else {
              layerIndex++;
              mylayers[layerIndex] = layer;
            }
          }
          // this.defaultCheckedLayers = defaultCheckedLayers;
          //树里移除’默认定位‘
          let defaultIndex =  mylayers.findIndex(item => item.id == "默认定位")
          if(defaultIndex&&defaultIndex != -1){
            mylayers.splice(defaultIndex,1)
          }
          //树里移除’drawLine‘
          let defaultIndex1 =  mylayers.findIndex(item => item.id == "drawLine")
          if(defaultIndex1&&defaultIndex1 != -1){
            mylayers.splice(defaultIndex1,1)
          }
          //树里移除’drawLine1‘
          let defaultIndex2 =  mylayers.findIndex(item => item.id == "drawLine1")
          if(defaultIndex2&&defaultIndex2 != -1){
            mylayers.splice(defaultIndex2,1)
          }
          //树里移除’drawLine2‘
          let defaultIndex3 =  mylayers.findIndex(item => item.id == "drawLine2")
          if(defaultIndex3&&defaultIndex3 != -1){
            mylayers.splice(defaultIndex3,1)
          }
          let defaultIndex4 =  mylayers.findIndex(item => item.id == "drawLine_highlight_layer")
          if(defaultIndex4&&defaultIndex4 != -1){
            mylayers.splice(defaultIndex4,1)
          }

          this.layers = mylayers;
          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys(defaultCheckedLayers,false);
          });

        },
      },
      beforeDestroy(){
        this.$bus.off("toggleLayerControl",this.toggleLayerControl)
      }
    }
</script>

<style>
  .layerControl .el-tree-node__content:hover{
    color:#0AC8FF;
    background-color: #101A64;
  }
  .layerControl .el-tree-node:focus>.el-tree-node__content{
    background-color: #101A64;
  }
</style>
